<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
      <table-index :table="table" @loadData="loadData">
        <template #provinceAndCityName="{ record }">
          <div class="col-text">{{ record.provinceName }} {{ record.cityName }} </div>
        </template>
        <template #contactName="{ record }">
          <span v-if="record.contactName || record.contactPhone">
            <div class="col-text">{{ record.contactName || '-' }} </div>
            <div class="col-text">{{ record.contactPhone || '-' }}</div>
          </span>
          <span v-else>-</span>
        </template>
        <template #industryStatusStr="{ record }">
          <div class="flex items-center status-wrapper">
            <span :class="[+record.industryStatus !== 20 ? 'close' : 'open', 'status-icon']"></span>
            <span>{{ record.industryStatusStr }}</span>
          </div>
        </template>
      </table-index>
    </a-card>
  </div>
</template>

<script setup lang="ts" name="PeerList">
  import { onMounted, reactive, computed } from 'vue'
  import { Modal, Message } from '@arco-design/web-vue'
  import { getPeerList, updatePeerStatus, exportPeer } from '@/api/market/peer'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { useExport } from '@/hooks/list'
  import useNavigate from '@/hooks/useNavigate'

  const { navigateTo } = useNavigate()

  const peerPageData = usePageDict('peerPageData')
  // 接口参数（不包含page信息）
  const queryParam = reactive<any>({})

  // 导出事件
  const handleExport = () => {
    useExport(exportPeer, queryParam)
  }
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '同行名称', prop: 'industryNameLike', type: 'a-input' },
      {
        label: '省',
        prop: 'provinceCode',
        type: 'remote-select',
        attrs: {
          type: 'area_province',
        },
      },
      {
        label: '市',
        prop: 'cityCode',
        type: 'remote-select',
        attrs: {
          type: 'area_city_each',
          params: {
            parentCode: queryParam.provinceCode,
          },
        },
        change: (val: string, option: any) => {
          if (val) {
            queryParam.provinceCode = option.parentCode
          }
        },
      },
      { label: '同行联系人', prop: 'contactNameLike', type: 'a-input' },
      {
        label: '状态',
        prop: 'industryStatus',
        type: 'a-select',
        options: peerPageData.industryStatusEnum,
      },
    ]
  })

  // 初始化
  const init = () => {
    loadData()
  }
  // table 配置
  const table = useTable({
    queryParam,
    columns: [
      { title: '同行名称', dataIndex: 'industryName', fixed: 'left' },
      { title: '省/市', dataIndex: 'provinceName', slotName: 'provinceAndCityName' },
      { title: '同行联系人', dataIndex: 'contactName', slotName: 'contactName', width: 120 },
      { title: '累计收入', dataIndex: 'totalReceiveAmount', sortable: { sortDirections: ['ascend', 'descend'] }, unit: '元', width: 130 },
      { title: '累计支出', dataIndex: 'totalPayAmount', sortable: { sortDirections: ['ascend', 'descend'] }, unit: '元', width: 130 },
      { title: '状态', dataIndex: 'industryStatusStr', slotName: 'industryStatusStr', width: 100 },
      { title: '创建时间', dataIndex: 'createTime', width: 180 },
      { title: '创建人', dataIndex: 'createUserName', width: 120 },
    ],
    operates: [
      {
        label: '启用',
        permission: 'svms:market:bazaar:peer.enable',
        // 禁用状态显示启用按钮
        show: (record: any) => record.industryStatus == 10,
        method: (record: any) => {
          updateStatus(record, '启用')
        },
      },
      {
        label: '停用',
        permission: 'svms:market:bazaar:peer.deactivate',
        // 禁用状态显示启用按钮
        show: (record: any) => record.industryStatus == 20,
        method: (record: any) => {
          updateStatus(record, '停用')
        },
      },
      {
        label: '编辑',
        permission: 'svms:market:bazaar:peer.edit',
        method: (record: any) => {
          navigateTo('/peer-manage/edit/' + record.id, `${record.industryName}-编辑`)
        },
      },
      {
        label: '详情',
        permission: 'svms:market:bazaar:peer.detail',
        method: (record: any) => {
          navigateTo('/peer-manage/detail/' + record.id, `${record.industryName}-详情`)
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:market:bazaar:peer.export',
        method: () => handleExport(),
      },
      {
        type: 'primary',
        icon: 'plus',
        permission: 'svms:market:bazaar:peer.add',
        label: '新增',
        method: () => handleAdd(),
      },
    ],
  })

  // 修改状态
  const updateStatus = (record: any, operateName: string) => {
    Modal.confirm({
      title: '提示',
      simple: true,
      cancelText: '取消',
      okText: '确认',
      content: `是否确认${operateName}？`,
      onOk: () => {
        const param = {
          id: record.id!,
          industryStatus: operateName == '启用' ? 20 : 10,
        }
        updatePeerStatus(param).then(() => {
          Message.success(`${operateName}成功`)
          loadData()
        })
      },
    })
  }

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getPeerList)
  // 添加事件
  const handleAdd = () => {
    navigateTo('/peer-manage/create', '')
  }
  // 删除气泡
  // mounted 调用接口
  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped>
  .status-wrapper {
    height: 28px;
    .status-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      &.open {
        background: #00b42a;
      }
      &.close {
        background: #ea0000;
      }
    }
  }
</style>
